<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 用户管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/user' }">用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="userlist">
            <div class="right container">
                <div class="rsearch">
                    <div class="firstchild">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="用户名">
                                <el-input type="text" placeholder="请输入用户名称" v-model="username"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input type="tel" placeholder="手机号" v-model="phone"> </el-input>
                            </el-form-item>
                            <el-form-item label="注册时间">
                                <el-date-picker v-model="starttime" type="datetime"
                                    placeholder="开始日期"></el-date-picker>至<el-date-picker v-model="endtime" type="datetime"
                                    placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <el-button type="primary" @click="filter">筛选</el-button>
                        <el-button type="primary">导出</el-button>
                        <el-link type="primary" style="margin-left: 10px;" @click="clear">清空筛选条件</el-link>
                    </div>
                </div>
                <!-- 渲染表格 -->
                <div class="rtable">
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="id" label="用户ID">
                        </el-table-column>
                        <el-table-column prop="username" label="用户名">
                        </el-table-column>
                        <el-table-column prop="phone" label="手机号">
                        </el-table-column>
                        <el-table-column prop="createdate" label="注册时间">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 渲染分页器 -->
                <div class="rpag">
                    <el-pagination :current-page="currentPage4" :page-sizes="[1, 2, 3, 4, 5]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @current-change="handleCurrentChange" @size-change="handleSizeChange">
                    </el-pagination>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { selectUsers } from '@/api/userManager.js'
export default {
    data() {
        return {
            username: '',
            phone: "",
            starttime: '',
            endtime: '',
            pageNum: 1,
            pageSize: 3,
            tableData: [],
            total: 0,
            currentPage4: 1
        }
    },
    mounted() {
        this.ajaxfunction()

    },
    methods: {
        handleCurrentChange(i) {
            // console.log(i);
            this.pageNum = i
            this.ajaxfunction()
        },
        handleSizeChange(i) {
            this.pageSize = i
            this.ajaxfunction()
        },
        //筛选事件
        filter() {
            if (this.starttime || this.endtime) {
                if (this.starttime && this.endtime) {
                    // console.log('333');
                    this.starttime = this.$day(this.starttime).format('YYYY-MM-DD HH:mm')
                    this.endtime = this.$day(this.endtime).format('YYYY-MM-DD HH:mm')
                }
                else if (this.starttime) {
                    // console.log('1111');
                    this.endtime = ''
                    this.starttime = this.$day(this.starttime).format('YYYY-MM-DD HH:mm')
                } else if (this.endtime) {
                    // console.log('222');
                    this.starttime = ''
                    this.endtime = this.$day(this.endtime).format('YYYY-MM-DD HH:mm')
                }
            }
            else {
                this.starttime = ''
                this.endtime = ''
            }
            this.pageNum = 1
            this.ajaxfunction()
        },
        //清空筛选条件事件
        clear() {
            this.username = ''
            this.phone = ''
            this.starttime = ''
            this.endtime = ''
            this.filter()

        },
        //简易封装获取数据的函数
        async ajaxfunction() {
            let obj = {
                username: this.username,
                phone: this.phone,
                starttime: this.starttime,
                endtime: this.endtime,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            const param = new URLSearchParams(obj);
            // console.log("1111");
            const res = await selectUsers(param)

            if (res.code == 200) {
                this.tableData = res.data.list
                this.total = res.data.total
            } else {
                this.$message.error(res.msg);
            }
            return res
        }
    }
}

</script>

<style scoped>
.rpag {
    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
    /* overflow:hidden ; */
}

::v-deep .el-table .el-table__cell {
    text-align: center;
    font-size: 16px;
}

::v-deep th {
    height: 40px;
}

::v-deep td {
    height: 70px;
}

.rtable {
    margin-top: 50px;
    width: 100%;
}

/* .el-table__header {
    width: 100% !important;
} */

.rsearch {
    width: 100%;
    /* height: 120px; */
    background-color: rgb(227, 227, 227);
    box-sizing: border-box;
    padding: 0px 60px;
    overflow: hidden;
    padding-bottom: 10px;
}

.rsearch .firstchild {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 10px;
    box-sizing: border-box;
    /* padding: 0px 100px; */
}

.rsearch .firstchild input {
    height: 32px;
    border: none;
}

.rtitle {
    margin-bottom: 15px;
    /* margin-left: 100px; */
}

.userlist {

    display: flex;
    width: 100%;


}

.right {

    flex: 1;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 2px 2px 3px rgb(156, 155, 155), -1px -1px 2px rgb(156, 155, 155);
    width: 100%;
    /* margin-left: 110px; */

}
</style>

